<template>
  <div class="main">
    <div class="det_top_box">
      <div class="detail_header">
        <div class="det_top">
          <div>使用部门：{{ form.OrgName }}</div>
          <div>
            <img
              class="dep_top_img"
              src="@/assets/Images/AppIcon/icon_qr_code.png"
              alt=""
              v-if="form.IsQRCode"
              @click="goQRCode"
            />
          </div>
        </div>
        <van-row class="det_name">{{ form.TypeName }}</van-row>
        <van-row class="det_location"></van-row>
        <van-row class="mb-10"> </van-row>
        <van-row class="mb-10">
          <van-col span="12">
            <span class="mr-5">录入人</span>
            <span>{{ form.CreateChnName }}</span>
          </van-col>
          <van-col span="12">
            <span class="mr-5">录入时间</span>
            <span>{{ getFillterDate(form.CreateDate) }}</span>
          </van-col>
        </van-row>
      </div>
    </div>
    <div class="det_tab">
      <div class="det_tab_item">
        <van-tag type="primary" size="large" mark>基本信息1</van-tag>
        <van-cell-group :border="border">
          <van-cell title="器材编号" :value="form.No" />
          <van-cell title="规格" :value="form.Specifications" />
          <van-cell title="位置" :value="form.Location" />
          <van-cell title="数量" :value="form.Cnt" />
          <van-cell title="使用部门" :value="form.OrgName" />
          <van-cell title="点检卡" :value="form.TemplateName" />
          <van-cell
            title="最近检验日期"
            :value="getFillterDate(form.CheckDay)"
          />
          <van-cell
            title="下次检验日期"
            :value="getFillterDate(form.NextCheckDay)"
          />
        </van-cell-group>
      </div>

      <div class="det_tab_item" v-if="this.platfrom == 'CY'">
        <div class="duiqi">
          <eagle-tag class="mb-10" type="primary" size="large" mark
          >异常清单</eagle-tag>
          <eagle-tag class="mb-10" size="large" @click="Exceptionlist()" 
            >更多>></eagle-tag
            
          >
        </div>
        
        <div class="det_tab_item_text" >
          <div class="text_box1" @click.stop="siteCheck(data)" v-if="data.CreateChnName && data.CreateDate">
            <eagle-row class="mb-10">
              <eagle-col span="24" >
                <img
                  class="icon"
                  src="@/assets/Images/AppIcon/icon_list_user.png"
                />
                <span class="mr-5">点检人：</span>
                <span>{{ data.CreateChnName }}</span>
              </eagle-col>
            </eagle-row>
            <eagle-row class="mb-10">
              <eagle-col span="24">
                 <img
                  class="icon"
                  src="@/assets/Images/AppIcon/icon_danger_main_assign.png"
                />
                <span class="mr-5">点检日期：</span>
                <span>{{ data.CreateDate }}</span>
              </eagle-col>
            </eagle-row>
          </div>
        </div>
      </div>



      <div class="det_tab_item">
        <van-tag class="mb-10" type="primary" size="large" mark
          >实施点检</van-tag
        >
        <div class="det_tab_item_text">
          <div class="text_box">
            <div class="text_img">
              <div  class="img_item" @click="_goFireEquipmentCheck()">
                <img
                  src="@/assets/Images/AppIcon/icon_danger_main_checktask.png"
                  alt=""
                />
                <div>点检</div>
              </div>
              <div class="img_item" @click="goInspectRecord()">
                <img
                  src="@/assets/Images/AppIcon/icon_danger_main_checkdetail.png"
                  alt=""
                />
                <div>点检历史</div>
              </div>
            </div>
          </div>
        </div>
      </div>
          <!-- 弹出层 -->
    <eagle-dialog
      title="整改"
      v-model="showCheck"
      titlePosition="center"
      @close="cancle"
      @confirm="confirm"
    >
      <eagle-input
        label="整改图片："
        name="uploader"
        v-model="VerifyAttachs"
        :key="ImgKey"
        ref="upload"
      >
        <template #input>
          <eagle-image-uploader :images.sync="VerifyAttachs"></eagle-image-uploader>
        </template>
      </eagle-input>
      <eagle-input
        label="整改说明"
        name="name"
        v-model="VerifyRemarks"
        placeholder="请输入"
        isInputText
        type="textarea"
        autosize
        row="3"
      ></eagle-input>
    </eagle-dialog>
    </div>
  </div>
</template>

<script>
import { GetDetail,GetAbnormal } from "@/api/siteFireEquipment";
import { getDate } from "@/utils/getDate";
import { upload } from "@/api/common";
import store from "@/store/index";
import { getUserInfo } from '@/api/base'
export default {
  components: {},
  data() {
    return {
      showCheck: false,
      ImgKey: "",
      VerifyRemarks: "",
      VerifyAttachs: "",
      code: this.$route.query.code,
      recordId: this.$route.query.recordId,
      form: {},
      data:{},
      border: false,
      platfrom: '',
      user:{}
    };
  },
  created() {
    this.geDetail();
    if(process.env.VUE_APP_PLANTFORM&&process.env.VUE_APP_PLANTFORM=="CY"){
      store.state.title="专项清单[详情]"
    }
    getUserInfo().then((res)=>{
      this.user = res.data;
    }).catch((err)=>{
      console.log("err", err);
    })
  },
  mounted() {
    if (process.env.VUE_APP_PLANTFORM && process.env.VUE_APP_PLANTFORM == "CY") {
      this.platfrom = process.env.VUE_APP_PLANTFORM;
    }
  },
  methods: {
    getFillterDate(date) {
      return getDate(date);
    },
    geDetail() {
      let params = { code: this.code };
      GetDetail(params).then((res) => {
        this.form = res.data;
      });
      let param = {
          dataType: "ExceptHis",
          objCode: this.$route.query.code,
          keywords: "",
      }
      GetAbnormal(param).then((res) => {
        // this.data = res.data.Data
      var data = res.data.Data
      for(var i =0; i<data.length;i++ ){
        this.data = data[i]
      }
      })
    },
    // 二维码
    goQRCode() {
      this.$router.push({
        path: "/SiteFireEquipment/QRCode",
        query: {
          value: this.form.TypeName,
        },
      });
    },
    // 点检记录
    goInspectRecord() {
      this.$router.push({
        path: "/SiteFireEquipmentCheckRecord",
        query: {
          objCode: this.form.Code,
          type:2
        },
      });
    },
    // 发起点检
    _goFireEquipmentCheck() {
      //恢复原点检页面
      // if(process.env.VUE_APP_PLANTFORM=='CY'){
      //   this.$router.push({
      //   path: "/SiteFireEquipmentCheckRecord",
      //   query: {
      //     objCode: this.form.Code,
      //     type:1
      //   },
      // });
      // }else{
    this.$router.push({
        path: "/SiteFireEquipmentCheck",
        query: {
          mainCode: this.form.MainCode,
          objCode: this.form.Code,
          // name:this.form.TypeName,
        },
      });
      // }
  
    },
    siteCheck(item) {
      this.IDS = item.ID;
      this.showCheck = true;
    },
    // 弹窗保存
    confirm() {
      let params = {
        IDS: this.IDS,
        VerifyAttachs: this.VerifyAttachs,
        VerifyRemarks: this.VerifyRemarks,
      };
      let _this = this;
      _this.$axios.post("/SiteCheckTask/ConfirmVerify", params).then((res) => {
        _this.$toast.success("保存成功");
        _this.showCheck = false;
        setTimeout(() => {
          this.$router.go(0)
        }, 300);
      });
    },
    cancle() {
      //this.ImgKey = "";
      this.VerifyAttachs = "";
      this.VerifyRemarks = "";
      this.showCheck = false;
    },
    //异常清单更多页面
    Exceptionlist(){
       this.$router.push({
        path: "/SiteFireEquipmentExceptionlist",
        query: {
          objCode: this.form.Code,
        },
      });
    },



  },
};
</script>

<style lang="less" scoped>
.det_top_box {
  padding: 10px;
  background-color: #e8f1f8;
  height: auto;
}

.detail_header {
  color: #ffffff;
  background: url("../../../assets/Images/AppIcon/image_equipment_detail_bg.png");
  background-size: cover;
  padding: 10px;
  border-radius: 5px;
  /*background-color: #fff;*/

  .det_top {
    display: flex;
    justify-content: space-between;

    .dep_top_img {
      height: 18px;
      width: 18px;
      margin-right: 10px;
    }
  }

  .det_name {
    margin-top: 20px;
    text-align: center;
  }

  .det_location {
    text-align: center;
    margin-bottom: 20px;
  }
}
.det_tab {
  padding: 10px;
  .det_tab_item {
    padding: 10px 0;
    background-color: #fff;
    border-radius: 5px;
    margin-bottom: 10px;

    .det_tab_item_text {
      padding: 0 10px;
    }
  }
}

.text_box1 {
  font-size: 13px;
}
.text_box {
  padding: 10px;
  border-radius: 5px;
  background-color: #fff;
  margin-bottom: 10px;

  .text_top {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    .top_link {
      color: #1989fa;
    }
  }

  .text_item {
    display: flex;
    justify-content: space-between;
    margin-left: 10px;

    .item_link {
      color: #1989fa;
    }
  }

  .text_img {
    display: flex;
    align-items: center;

    .img_item {
      width: 33.3%;
      text-align: center;

      img {
        height: 25px;
        width: 25px;
        margin-bottom: 10px;
      }
    }
  }

  .text_history {
    display: flex;
    vertical-align: middle;
    margin-bottom: 10px;
  }

  .text_member {
    color: #1989fa;
    margin-bottom: 10px;
  }

  .text_total_img {
    display: flex;
    align-items: center;

    .img_item {
      width: 33.3%;
      text-align: center;

      .img_item_top {
        display: flex;
        vertical-align: middle;
        margin-bottom: 10px;
      }
      img {
        height: 15px;
        width: 15px;
        margin-right: 5px;
      }
    }
  }
  .text_record_list {
    .list_row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      > div {
        width: 33.3%;
      }
      .row_center {
        text-align: center;
      }
      .row_right {
        text-align: right;
      }
    }
  }
}
.operate_det {
  background-color: #fff;
  padding: 10px;
  .operate_list {
    border: 1px solid #e8f1f8;
    .operate_row_first {
      padding: 10px;
      background-color: #e8f1f8;
      border-bottom: 1px solid #e8f1f8;
      margin-bottom: 10px;
    }
    .operate_row {
      padding: 10px;
      border-bottom: 1px solid #e8f1f8;
      /*margin-bottom: 10px;*/
    }
  } 
}
.duiqi{
    display: flex;
    justify-content: space-between;
    margin-right: 5px;
  }
  .card_check {
  .info_tag {
      right: -35px;
    }
  }
  .icon {
    height: 15px;
    width: 15px;
    margin-right: 5px;
    vertical-align:middle;
  }
</style>
